<template>
  <div class="conceptStyle">
    <div class="section" v-for="(item, index) in sections" :key="index">
      <div v-html="item" class="item">
      </div>
      <div>
        <CodeStyle v-if="code" :code="code[index]" :name="name[index]"/>
      </div>
    </div>
  </div>
</template>

<script>
import CodeStyle from './CodeStyle.vue'
import conceptStyle from '@/api/ConceptStyle.js'
import '@/style/ConceptStyle.css'

export default {
  components: {
    CodeStyle
  },
  props: {
    concept: {
      type: String,
      default: ''
    },
    code: {
      type: Array,
      default(){
        return ['']
      }
    }
  },
  data () {
    return {
      name: ["one", "two", "three", "four", "five", "six", "seven", "eight"],
      sections: []
    }
  },
  mounted () {
    let concept = conceptStyle(this.concept)
    this.sections = concept.split('(下一个)')
  }
}

</script>
<style scoped>
.section{
  margin-bottom: 4vh;
}
</style>


